<template>
    <div class="verify-code-container">
        <div class="verify-code-box">
            <div class="top-box van-hairline--bottom">
                <div class="user-price">￥285.00</div>
                <div class="user-admin">微信账户 (180****5678) </div>
            </div>
            <div class="bottom-box">
                <div class="title">手机号验证</div>
                <div class="alert-info">请输入 (180****5678) 手机收到的验证码</div>
                <div class="pwd-box">
                    <PasswordInput :value="passWord"
                                   :focused="showKeyboard"
                                   @focus="showKeyboard = true"
                                   :error-info="errorInfo"
                    />
                </div>
            </div>
        </div>
        <NumberKeyboard
                :show="showKeyboard"
                @input="onInput"
                @delete="onDelete"
                @blur="showKeyboard = false"
        />
    </div>
</template>

<script>
    import { PasswordInput, NumberKeyboard } from 'vant';

    export default {
        name: "VerifyCode",
        components:{
            PasswordInput,
            NumberKeyboard
        },
        data() {
            return {
                passWord:'',
                showKeyboard: true,
                errorInfo: '',
            }
        },
        methods:{
            onInput(key) {
                this.passWord = (this.passWord + key).slice(0, 6);
                if (this.passWord.length === 6){
                    console.log(this.passWord);
                    return this.$router.push('getMoneyInfo')
                }
            },
            onDelete() {
                this.passWord = this.passWord.slice(0, this.passWord.length - 1);
            },
        }
    }
</script>

<style scoped lang="scss">
    .verify-code-container{
        .verify-code-box{
            width:345px;
            background:rgba(255,255,255,1);
            border-radius:8px;
            margin: 15px;
            .top-box{
                height: 122px;
                overflow: hidden;
                .user-price{
                    font-size:28px;
                    font-weight:500;
                    color:rgba(255,141,81,1);
                    text-align: center;
                    margin-top: 30px;
                }
                .user-admin{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(66,69,95,1);
                    text-align: center;
                    margin-top: 10px;
                }
            }
            .bottom-box{
                height: 192px;
                .title{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(66,69,95,1);
                    margin-top: 30px;
                    text-align: center;
                }
                .alert-info{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(66,69,95,1);
                    margin-top: 15px;
                    text-align: center;
                }
                .pwd-box{
                    margin-top: 20px;
                }
            }
        }
    }
</style>
